<!DOCTYPE html>
<html>
<head>
    <title>AI Chat</title>
    <style>
        body {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        #chat-box {
            height: 400px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
            padding: 10px;
            overflow-y: auto;
        }
        .message {
            margin-bottom: 10px;
            padding: 8px;
            border-radius: 4px;
        }
        .user {
            background-color: #e3f2fd;
            margin-left: 20%;
        }
        .assistant {
            background-color: #f5f5f5;
            margin-right: 20%;
        }
        #input-box {
            width: 100%;
            display: flex;
            gap: 10px;
        }
        #message-input {
            flex-grow: 1;
            padding: 8px;
        }
        button {
            padding: 8px 16px;
        }
    </style>
</head>
<body>
    <h1>AI Chat</h1>
    <div id="chat-box"></div>
    <div id="input-box">
        <input type="text" id="message-input" placeholder="Type your message...">
        <button onclick="sendMessage()">Send</button>
    </div>

    <script>
        const sessionId = Math.random().toString(36).substring(7);
        let isInitialized = false;

        async function initChat() {
            const response = await fetch('/api/init', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    session_id: sessionId,
                    message: ''
                })
            });
            isInitialized = true;
        }

        async function sendMessage() {
            if (!isInitialized) {
                await initChat();
            }

            const input = document.getElementById('message-input');
            const message = input.value;
            if (!message) return;

            // 显示用户消息
            addMessage('user', message);
            input.value = '';

            // 发送到服务器
            const response = await fetch('/api/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    session_id: sessionId,
                    message: message
                })
            });

            const data = await response.json();
            
            // 显示助手回复
            addMessage('assistant', data.message);
        }

        function addMessage(role, content) {
            const chatBox = document.getElementById('chat-box');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${role}`;
            messageDiv.textContent = content;
            chatBox.appendChild(messageDiv);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        // 支持回车发送
        document.getElementById('message-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 初始化聊天
        initChat();
    </script>
</body>
</html>